<template>
    <div id="app">
            <div class="left">
                <ul>
                    <li v-for="item in leftArr" :key="item.id">
                        <input type="checkbox" :data-id="item.id" v-on:click="checkLeft()" v-model="item.id.temp" />
                        <span>{{item.id}}</span>
                        <span>{{item.room}}</span>
                    </li>
                </ul>
            </div>
            <div class="mid">
                <br><br>
                <button v-on:click='toRight()'>向右》</button><br><br>
                <button v-on:click='toLeft()'>《向左</button>
            </div>
            <div class="right">
                <ul>
                    <li v-for="item in rightArr" :key="item.id">
                        <input type="checkbox" :data-id="item.id" v-on:click='checkRight()'  />
                        <span>{{item.id}}</span>
                        <span>{{item.room}}</span>
                    </li>
                </ul>
            </div>
        </div>
</template>
<script>
        var leftTemp = [];
        var leftArr = [];
         var rightTemp = [];
        var rightArr = [];
        var app = new Vue({
          el: '#app',
          data: {
            leftArr: leftArr,
            rightArr:rightArr,
          },
          methods: {
            checkLeft: function () {
                let id = event.target.dataset.id;
                if(event.target.checked){ //选中
                    app.leftArr.forEach(function(val,index){
                        if(val.id == id){
                            leftTemp.push(val);
                        }
                    });
              }else{    //没有选中
                  let id = event.target.dataset.id;
                  leftTemp.forEach(function(val,index){
                        if(val.id == id){
                            leftTemp.splice(index,1);
                        }
                  });
              }
            },
            checkRight: function () {
                let id = event.target.dataset.id;
                if(event.target.checked){ //选中
                    app.rightArr.forEach(function(val,index){
                        if(val.id == id){
                            rightTemp.push(val);
                        }
                    });
              }else{    //没有选中
                  let id = event.target.dataset.id;
                  rightTemp.forEach(function(val,index){
                        if(val.id == id){
                            rightTemp.splice(index,1);
                        }
                  });
              }
            },
            toRight:function(){
                leftTemp.forEach(function(val,index){
                    let keyTmp;
                    app.leftArr.forEach(function(value,key){
                        if(val.id == value.id){
                            keyTmp = key;
                        }
                    });
                    app.leftArr.splice(keyTmp,1);
                    app.rightArr.push(val);
                  });
                  
                  leftTemp = [];
            },
            toLeft:function(){
                rightTemp.forEach(function(val,index){
                    let keyTmp;
                    app.rightArr.forEach(function(value,key){
                        if(val.id == value.id){
                            keyTmp = key;
                        }
                    });
                    app.rightArr.splice(keyTmp,1);
                    app.leftArr.push(val);
                  });
                  
                  rightTemp = [];
            }
          }
        });
        $.ajax({
             type: "get",
             url: "./data.php",
             data: "",
             dataType: "json",
             success: function(data){
                //  let arr = [];
                //  $.each(data, function(index,val){
                //      arr[val.id] = val;
                //  });
                //  console.log(arr);
                 app.leftArr = data;
                //  console.log(leftArr);
             }
         });
    </script>